<template>
  <page-header-wrapper>
    <a-card>
      <a-form-model ref="formData" :model="formData" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="激励广告" prop="ad_is_open">
              <a-radio-group v-model="formData.ad_is_open">
                <a-radio :value="1"> 开启 </a-radio>
                <a-radio :value="0"> 关闭 </a-radio>
              </a-radio-group>
              <div class="ant-form-explain">关闭则激励广告功能不生效</div>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <div class="flex-y-cen" >每日兑换比例<a-input-number
                  style="margin: 0 5px"
                  v-model="formData.ad_convert_rate"
                  :min="0"
                  :formatter="(value) => `${value}%`"
                  :parser="(value) => value.replace('%', '')"
                />公式：当日兑换数 = 可兑换*每日兑换比例
              </div>
              <div class="flex-y-cen" > 每日汇率 <a-input-number
                  style="margin: 0 5px"
                  v-model="formData.ad_day_rate"
                  :min="0"
                  :formatter="(value) => `${value}%`"
                  :parser="(value) => value.replace('%', '')"
                />公式：当日金币单价 =  (昨日广告收入*每日汇率) /全网待兑换数*每日兑换比例
              </div>
              <div class="flex-y-cen" > 昨日广告收益 
                <a-input
                  style="margin: 0 5px;width: 100px;"
                  v-model="formData.ad_income"
                  type="text"
             
                />兑换现金公式：当日个人兑换数 * 当日金币单价，兑换时同时分配给平台分红和区域代理
              </div>
              <div class="flex-y-cen" > 定时兑换时间 
                <a-input
                  style="margin: 0 5px;width: 100px;"
                  v-model="formData.ad_convert_time"
                  type="text"
             
                />
              </div>
          </a-col>
        </a-row>
        <a-form-model-item>
          <div class="label_text" slot="label">广告设置<span></span></div>
          <div class="level_list">
            <div class="flex-y-cen" > 加成卡基础比例 <a-input-number
                  style="margin: 0 5px"
                  v-model="formData.ad_markup_base_rate"
                  :min="0"
                  :formatter="(value) => `${value}%`"
                  :parser="(value) => value.replace('%', '')"
                />加成卡比例 = 加成卡基础比例*月缴话费，电话卡活跃值大于0的，为有效的加成卡
              </div>
              <div class="flex-y-cen" > 每次看广告间隔 <a-input-number
                  style="margin: 0 5px"
                  v-model="formData.ad_interval_time"
                  :min="0"
                  :formatter="(value) => `${value}秒`"
                  :parser="(value) => value.replace('秒', '')"
                />在范围内随机数，填0或为空时，不限制看广告时间间隔
              </div>
              <div class="flex-y-cen" > 广告接口Token <a-input
                  style="margin: 0 5px; width: 200px;"
                  v-model="formData.ad_api_token"
                  
                  type="text"
                />
              </div>
              <div class="flex-y-cen" > 广告接口key <a-input
                  style="margin: 0 5px; width: 200px;"
                  v-model="formData.ad_api_key"
                  type="text"
                />
              </div>
          </div>
        </a-form-model-item>
        <a-row>
          <a-col :span="12">
            <a-form-model-item>
              <div class="label_text" slot="label">奖励规则<span style="width: 100rpx;height: 80rpx;background-color: blue;color: #fff;" @click="addc()">添加</span><span style="color: red;">（可增加多条奖励规则）</span></div>
              <div class="level_list">
               
                <div class="item" v-for="(item,index) in formData.level_data">
                  <span>{{index+1}}</span>
                  <span>累计广告任务</span>
                    <a-input-number
                      style="margin: 0 5px"
                      v-model="item.ad_task_rule.ad_total_task.start"
                      :formatter="(value)"
                      :parser="(value)"
                    />
                  <span>~</span>
                  <a-input-number
                      style="margin: 0 5px"
                      v-model="item.ad_task_rule.ad_total_task.end"
                      :formatter="(value)"
                      :parser="(value)"
                  />
                  <span>每日广告最多可看</span>
                  <a-input-number
                    style="margin: 0 5px"
                    v-model="item.ad_day_max"
                    :min="0"
                    :formatter="(value) => `${value}%`"
                    :parser="(value) => value.replace('%', '')"
                  />
                  <span>每条奖励真实收益</span>
                  <a-input
                    style="margin: 0 5px;width: 100px;"
                    v-model="item.ad_base_coin"
                    type="text"
                  />
                  <span> 继续再看广告，再奖励</span>
                  <a-input
                    style="margin: 0 5px;width: 100px;"
                    v-model="item.ad_again_rate"
                    type="text"
                  />
                  <span @click="delc(index)"> 删除</span>
                </div>
              </div>
             
            </a-form-model-item>
          </a-col>

        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="广告区域分红" prop="index_banner_switch">

              <div class="flex-y-cen" > 佣金 <a-input-number
                  style="margin: 0 5px"
                  v-model="formData.ad_area_money_rate"
                  :min="0"
                  :formatter="(value) => `${value}%`"
                  :parser="(value) => value.replace('%', '')"
                />
              </div>
              <div class="flex-y-cen" > 积分 <a-input-number
                  style="margin: 0 5px"
                  v-model="formData.ad_area_integral_rate"
                  :min="0"
                  :formatter="(value) => `${value}%`"
                  :parser="(value) => value.replace('%', '')"
                />
              </div>
              <div>
                个人广告兑换所得*区域比例*区域股东比例，空或0则不生效
              </div>
             
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="广告平台分红" prop="location_switch">
              <div class="flex-y-cen" > 广告平台分红 <a-input-number
                  style="margin: 0 5px"
                  v-model="formData.ad_plat_rate"
                  :min="0"
                  :formatter="(value) => `${value}%`"
                  :parser="(value) => value.replace('%', '')"
                /> 昨日广告收入*平台分红比
              </div>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-form-model-item>
          <a-button type="primary" :loading="loading" @click="submitForm">保存</a-button>
        </a-form-model-item>
      </a-form-model>
    </a-card>
  </page-header-wrapper>
</template>

<script>
var _self
import { optionListApi, optionSetSaveApi } from '@/api/ad'
import { cyyUploadImg } from '@/components/CyyUi/index'
import { level } from '@/api/shareholder'
export default {
  components: { cyyUploadImg },
  data() {
    return {
      labelCol: { span: 24 },
      wrapperCol: { span: 24 },
      formData: {
        level_data: [
        ],
        ad_is_open: 1,
        ad_convert_rate: 0,
        ad_convert_time: 0,
        ad_day_rate: 0,
        ad_markup_base_rate: 0,
        ad_api_token:'',
        ad_api_key: '',
        ad_area_integral_rate: 0,
        ad_area_money_rate: 0,
        ad_plat_rate:0,
        ad_interval_time: 0,
        ad_income:0,
      },
      loading: false,
      index_banner: [],
      levelList: [],
    }
  },
  created() {
    _self = this
    _self.getLevelList()
    _self.getInfo()
  },
  methods: {
    addc(){
      _self.formData.level_data.push({
             'ad_again_rate':0,
             'ad_base_coin':0,
             'ad_day_max':0,
             'ad_task_rule':{
                'ad_total_task':{
                     'end':0,
                     'start':0,
                }
             },
             'ad_type':0,
            })
    },
    delc(index){
      _self.formData.level_data.splice(index,1)
    },
    getInfo() {
      optionListApi()
        .then((res) => {
         
          if (res.code == 0) {
            
            _self.formData.level_data = res.data.level_data
            _self.formData.ad_is_open = Number(res.data.ad_is_open) || 0
            _self.formData.ad_convert_rate = Number(res.data.ad_convert_rate) || 0
            _self.formData.ad_day_rate = Number(res.data.ad_day_rate) || 0
            _self.formData.ad_markup_base_rate = Number(res.data.ad_markup_base_rate) || 0
            _self.formData.ad_api_token = res.data.ad_api_token
            _self.formData.ad_api_key = res.data.ad_api_key
            _self.formData.ad_area_integral_rate = Number(res.data.ad_area_integral_rate) || 0
            _self.formData.ad_area_money_rate = Number(res.data.ad_area_money_rate) || 0
            _self.formData.ad_interval_time = Number(res.data.ad_interval_time) || 0
            _self.formData.ad_plat_rate = Number(res.data.ad_plat_rate) || 0
            _self.formData.ad_income = res.data.ad_income
            _self.formData.ad_convert_time = res.data.ad_convert_time


            


            

            



           console.log( _self.formData.level_data,'cjasoixjaxioa')
   
        //  _self.formData.index_banner = option.index_banner
        //     if (option.index_banner) {
        //       var index_banner = option.index_banner
        //       index_banner.forEach((item) => {
        //         _self.index_banner.push({ pic_url: item })
        //       })
        //     }
        //     _self.formData.index_banner_switch =
        //       option.index_banner_switch === '' ? 0 : Number(option.index_banner_switch)
        //     _self.formData.location_switch = option.location_switch === '' ? 0 : Number(option.location_switch)
          } else {
            _self.$message.error(res.msg)
          }
        })
        .catch((err) => {})
    },
    async getLevelList() {
      const res = await level({ pageNo: 1, pageSize: 100 })
      if (res.code == 0) {
        this.levelList = res.data.data
      }
    },
    delPic(e) {
      _self.index_banner.splice(e.index, 1)
    },
    selectPic(e) {
      _self.index_banner = _self.index_banner ? _self.index_banner : []
      e.data.forEach((ele) => {
        _self.index_banner.push({ pic_url: ele })
      })
    },
    submitForm() {
      // var index_banner = []
      // _self.index_banner.forEach((item) => {
      //   index_banner.push(item.pic_url)
      // })
      // if (index_banner.length) {
      //   _self.formData.index_banner = index_banner.join(',')
      // }
      // _self.$refs.formData.validate((valid) => {
      //   if (valid) {
          // _self.loading = true
          optionSetSaveApi(_self.formData)
            .then((res) => {
              _self.loading = false
              if (res.code === 0) {
                _self.$message.success(res.msg)
              } else {
                _self.$message.error(res.msg)
              }
            })
            .catch((err) => {
              _self.loading = false
              console.log(err, 'err')
            })
        // } else {
        //   console.log('error submit!!')
        //   return false
        // }
      // })
    },
  },
}
</script>

<style lang="scss">
.level_list {
  padding-top: 10px;
  .item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    &:last-child {
      margin-bottom: 0;
    }
    .label {
      width: 60px;
    }
    .input_box {
      display: flex;
      align-items: center;
      margin-right: 5px;
      .ant-input-number,
      .ant-select {
        margin: 0 5px;
      }
    }
  }
}
.ant-form-explain {
  line-height: 32px;
}
.label_text {
  display: flex;
  align-items: center;
  span {
    font-size: 12px;
    color: red;
    margin-left: 5px;
  }
}
</style>
